//useCallback 目的是为了缓存方法(useMemo是为了缓存变量)

import React,{useState,useEffect,useCallback, useReducer} from "react";

//获取浏览器大小 可以抽出来当做方法使用
function useWinSize() {
    const [size,setSize] =useState({
        width:document.documentElement.clientWidth,
        height:document.documentElement.clientHeight
    })
    //!缓存方法 和 useEffect使用 一样
    //onResize只执行一次
    const onResize = useCallback(()=>{
        setSize({
            width:document.documentElement.clientWidth,
            height:document.documentElement.clientHeight
        })
    },[])

    //监听窗口变化
    useEffect(()=>{
        window.addEventListener('resize',onResize)
        //组件销毁时执行
        return ()=>{
            window.removeEventListener('resize',onResize)
        }
    },[])

    return size
}

function ExampleEnd() {
    const size = useWinSize()
    return(
        <div>页面Size:{size.width} x {size.height}</div>
    )
}

export default ExampleEnd;